<template>
	<view>
		<view class="goods u-p-t-10 u-p-b-30">
			<view class="u-m-20 ">
				<view style="font-size: 32rpx;font-weight: 700;">退款书籍</view>
			</view>
			
			
			<view v-for="(item,index) in orderInfo.details"  class="u-m-l-20 u-m-r-20 u-m-b-20 u-flex" style="line-height: 50rpx;">
				<view class="u-p-r-20 u-flex-4" >
					<u-image width="200rpx" height="200rpx" :src="item.book.img?vuex_user.store + item.book.img:null" border-radius="20rpx"></u-image>
				</view>
				<view class="u-flex-8" style="width: 400rpx;">
					<view class="u-line-2">{{item.name}}</view>
					<view class="u-line-1" style="color: #82848A;">{{item.book.author}}</view>
					
				</view>
				<view class="u-p-l-10 u-flex-2" style="text-align: right;">
					<view >￥{{item.price | rounding}}</view>
					<view style="color: #82848A; font-size: 20rpx;" >×{{item.count}}</view>
				</view>
			</view>
			

		</view>
		<view class="u-m-20 ">
			<view >
				<view style="font-size: 32rpx;font-weight: 700;">申请退货退款</view>
			</view>
			<view class="u-m-t-30">
				<view class="u-m-b-30"  @click="toChoose">
					<u-section title="退款原因" :sub-title="subTitle"  line-color="red"></u-section>
				</view>
				
				<view class="u-m-b-30">
					<u-section title="退款金额" :sub-title="'￥'+totalPrice" line-color="red" sub-color="red" :arrow="false"></u-section>
				</view>
				<view class="u-m-b-30">
					<u-section title="补充描述" sub-title=""  line-color="red"  :arrow="false"></u-section>
					<textarea v-model="userDetial" type="text" placeholder-class="line" placeholder="补充描述,有助于商家更好的处理退款问题"  style="background-color: #e8e9eb;margin: 20rpx auto ;border-radius: 20rpx;"/>
					
				</view>
				<u-picker mode="selector" v-model="show"  :default-selector="[0]"  :range="selector" @confirm="chooseCofirm"></u-picker>
				
				
			</view>
		</view>
		<view class="comfirm" @tap="toConfirmReturns" style="width:600rpx;left: 80rpx;">
			<view class="add">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				subTitle:'请选择',
				totalPrice:'99.99',
				userDetial:'',
				selector: ['我不想要了', '质量问题', '商品瑕疵','收到商品时有划痕或破损'],
				current:-1,
				orderInfo:{ 
					details:[
						{
						name:'书籍名称',
						book:{
							author:'作者',
						},
						price:23.55,
						count:1
					},
					]
						
					
				}
			}
		},
		methods: {
			toConfirmReturns(){
				if(this.current < 0){
					this.$u.toast("请选择退款原因")
					return
				}
				this.$u.route({
					url:'/pages/order/returnsResult'
				})
			},
			chooseCofirm(index){
				this.current = index
				this.subTitle = this.selector[index]
				
			},
			toChoose(){
				this.show = true
			}
		}
	}
</script>

<style scoped lang="scss">
	.comfirm {
		display: flex;
		justify-content: space-around;
		width: 300rpx;
		line-height: 100rpx;
		position: absolute;
		bottom: 30rpx;
		left: 380rpx;
		background-color: #ff9900;
		border-radius: 60rpx;
		font-size: 30rpx;
		.add{
			display: flex;
			align-items: center;
			color: #ffffff;
			.icon{
				margin-right: 10rpx;
			}
		}
	}
	.goods{
		
		width: 700rpx;
		margin: 25rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}
</style>
